<template>
    <div class="room-detail">
        <span>房间环境参数：</span>
        <div class="environment-info">
            <div class="environment-item">
                <svg t="1608890310104" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4115" width="22" height="22">
                    <path
                        d="M537.4 599.8V156c0-49.1-40-89.1-89.1-89.1-49.1 0-89.1 40-89.1 89.1v443.8c-28.8 15.4-53.2 38-70.8 65.7-19.3 30.3-29.4 65.4-29.4 101.4 0 104.4 84.9 189.4 189.4 189.4 104.4 0 189.4-84.9 189.4-189.4 0-36.1-10.2-71.1-29.4-101.4-17.8-27.7-42.2-50.3-71-65.7z m-89.1 336.5c-93.4 0-169.4-76-169.4-169.4 0-65 36.3-123.3 94.7-152 3.5-1.7 5.7-5.4 5.6-9.3v-0.6-278.1h19.1c8.3 0 15-6.7 15-15s-6.7-15-15-15h-19.1v-36.5h44.9c8.3 0 15-6.7 15-15s-6.7-15-15-15h-44.9V194h59.7c8.3 0 15-6.7 15-15s-6.7-15-15-15h-59.7v-8c0-38.1 31-69.1 69.1-69.1s69.1 31 69.1 69.1v449.5c-0.1 3.9 2.1 7.6 5.6 9.3 58.4 28.7 94.7 87 94.7 152 0 93.5-76 169.5-169.4 169.5z"
                        p-id="4116" fill="#6B6B6B"></path>
                    <path
                        d="M479.9 638.8V405.3c0-17.5-14.2-31.7-31.7-31.7s-31.7 14.2-31.7 31.7v233.5c-57.5 14.2-100.2 66-100.3 127.9-0.1 71.8 58.1 131 129.9 132.1 73.8 1.1 133.9-58.4 133.9-131.9 0.2-61.9-42.5-113.9-100.1-128.1zM687.8 119.9c-27.4 0-49.7 22.3-49.7 49.7s22.3 49.7 49.7 49.7 49.7-22.3 49.7-49.7-22.3-49.7-49.7-49.7z m0 69.4c-10.9 0-19.7-8.8-19.7-19.7s8.8-19.7 19.7-19.7 19.7 8.8 19.7 19.7-8.9 19.7-19.7 19.7zM875 174.2c15.5 0 29.5 3.6 41.7 10.8v-37.4c-12-4.6-26.8-6.9-44.5-6.9-28.4 0-51.5 9.1-69.4 27.4-17.9 18.2-26.9 41.7-26.9 70.4 0 27.3 8 49.1 24.1 65.4 16.1 16.4 37.8 24.6 65.1 24.6 21.2 0 38.5-3.2 51.7-9.7v-35.5c-13.3 7.8-28 11.7-44.2 11.7-17.2 0-30.8-5.4-40.9-16.3-10.1-10.9-15.1-25.2-15.1-43 0-18.3 5.3-33.1 15.9-44.4 10.6-11.5 24.8-17.1 42.5-17.1z"
                        p-id="4117" fill="#6B6B6B"></path>
                </svg>
                <span>温度：{{roomData.temperature}}</span>
            </div>
            <div class="environment-item">
                <svg t="1608890420450" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6348" width="22" height="22">
                    <path
                        d="M438.8 959.9c-174.4 0-316.2-137-316.2-305.5 0-68.9 50.5-188 150.1-354 73.1-121.9 147.3-226 148-227.1 4.2-5.8 11-9.2 18.2-9.2 7.2 0 14 3.5 18.1 9.2 60.1 85.4 116.6 173.3 169.5 263.4 2.6 4.9 3.1 10.7 1.4 16-1.7 5.3-5.4 9.7-10.3 12.3-10.3 5.6-23.2 2.4-29.6-7.4-57.1-98.5-119.2-190.6-149.2-234-26.2 38.2-77.5 114-128.1 198.4-94.1 157.1-143.9 272-143.9 332.4 0 144.9 122.1 262.8 272.1 262.8 28 0 55.8-4.1 82.5-12.3 11.4-3.4 23.4 2.8 27.3 14 1.7 5.4 1.2 11.2-1.4 16.2-2.6 5-7.1 8.8-12.5 10.4-31.2 9.5-63.5 14.4-96 14.4z m0 0"
                        p-id="6349" fill="#6B6B6B"></path>
                    <path
                        d="M317.9 814.8c-3.9 0-7.8-1-11.2-2.9-56.9-31.9-91.4-73.8-102.5-124.4-19.5-88.9 41.9-171 44.6-174.3 7.5-9.2 20.8-11.2 30.6-4.5 9.8 6.7 12.1 19.7 5.1 29.1-0.9 1.2-52.6 71.1-37 141.4 8.5 38.4 36 70.9 81.7 96.5 8.6 4.8 12.7 14.5 10.1 23.6-2.9 9.3-11.6 15.6-21.4 15.5z m371.9 106.1c-116.8-0.1-211.6-90.3-211.7-201.6 0-45.1 32.9-122.1 97.8-228.7 47.3-77.8 95.3-144.1 95.8-144.8 4.3-5.8 11-9.1 18.1-9.1 7.2 0 14 3.4 18.1 9.1 0.5 0.7 48.4 67 95.7 144.8 64.9 106.6 97.8 183.6 97.8 228.7-0.1 111.3-94.8 201.5-211.6 201.6z m0-525.6c-59.5 85.6-167.7 255.4-167.7 324.1 0 88.2 75.1 159.7 167.7 159.7s167.6-71.5 167.6-159.7c0-68.7-108.2-238.6-167.6-324.1z m0 0"
                        p-id="6350" fill="#6B6B6B"></path>
                    <path
                        d="M683 843c-4.7 0-9.3-1.3-13.3-3.7-44-27-70.1-60.6-77.6-99.8-12.3-64.5 31.5-119.4 33.4-121.7 8.4-9.3 22.4-11.2 32.9-4.3 10.4 6.9 12.9 20 5.5 29.6-0.5 0.7-33.9 43.2-24.8 89.4 5.3 27.2 24.6 51.2 57.4 71.4 8.4 4.8 12.3 14.8 9.3 24-3.2 9-12.4 15.2-22.8 15.1z m0 0"
                        p-id="6351" fill="#6B6B6B"></path>
                </svg>
                <span>湿度：{{roomData.humidity}}</span>
            </div>
            <div class="environment-item">
                <svg t="1608889819095" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3086" width="22" height="22">
                    <path
                        d="M149.2 399.1c0 44.6 36.3 81.7 79.9 81.7s79.9-37.3 79.9-81.7c7.3-52-36.3-81.7-79.9-81.7s-79.9 36.9-79.9 81.7zM908.7 209c-29-0.2-50.6 22-50.6 44.4 7.3 22.3 29 44.5 50.8 44.5 29.1 0 50.9-22.3 50.9-44.5 0-22.3-22-44.6-51.1-44.6v0.2zM687 245.8c43.6 0 79.9-37.3 79.9-81.7 0-44.3-36.3-81.7-79.9-81.7-43.6 0-79.9 37.3-79.9 81.7-7.3 44.3 29 81.5 79.9 81.5v0.2z m-332.8 22.3c36.3 0 72.6-29.7 72.6-66.8 0-37.2-29.1-67-72.6-67-36.3 0-72.6 29.7-72.6 66.8 0 37.1 29 66.8 72.6 66.8v0.2z m360 191.7c0 37.3 29.1 66.8 72.6 66.8 36.3 0 72.6-29.7 72.6-66.8 0-37.1-29-66.8-72.6-66.8-36.1-0.1-72.6 29.4-72.6 66.8z m-180.4-6.1c36.3 0 58.1-29.7 58.1-59.4s-29-59.4-58.1-59.4c-36.3 0-58.1 29.7-58.1 59.4 0 29.6 29.1 59.3 58.1 59.4z m358.5 127c-7.8 0-15.6 0-19.5 4-156.4 111.7-297.2 31.9-301 28-293.3-183.6-488.6 11.8-488.6 11.8-4.8 3.9-7.7 9.7-7.8 16 0.9 6 3.7 11.5 7.8 16 7.8 11.9 23.3 8 35.2 0 3.9-8 164.2-163.4 422.2-4 3.9 4 66.5 39.9 156.4 39.9 58.6 0 132.9-16 207.2-67.8 9.1-9.8 10.7-24.4 3.9-35.8-3.8-5.1-9.6-8.1-15.8-8.1zM121.4 208.5c32.4-0.4 58.5-26.9 58.1-59.4 0.2-15.6-5.8-30.6-16.7-41.8-10.9-11.2-25.8-17.5-41.4-17.7C89 90 63 116.6 63.3 149c-0.2 15.6 5.8 30.6 16.7 41.8 10.9 11.2 25.8 17.5 41.4 17.7zM176.1 746h-65.9v191.4h45.2V874h21.9c39.6 0 74.2-20.1 74.2-65.7 0.1-47.3-34-62.3-75.4-62.3z m-1 91.9h-19.7v-55.6h18.4c21.7 0 33.8 6.7 33.8 26 0 19.4-10.6 29.6-32.5 29.6z m209-9.4c-3.5 11.1-6.6 23.3-10.4 35h-1.2c-3.5-11.9-6.5-23.9-10.3-35l-29.8-82.7h-48.6v191.4H324V872c-0.8-22.2-2.7-44.4-5.8-66.5h1l15.1 45.8 25.5 70h24.7l25.2-70 15.6-45.8h1c-3.1 22-5 44.2-5.8 66.5v65.6h41.1V746.2h-49l-28.5 82.3z m175.2 73.1c28.8-29.6 56.5-65.9 56.5-98.9 0-36.6-25.2-60.3-61.6-60.3-26.7 0-43.9 9.8-62.4 29.6l24.5 24.7c8.8-9.8 18.7-18.7 31.8-18.7 14.9 0 24.5 9.3 24.5 27.1 0 28-31.6 62.6-78.5 106.1v26.2h130.3v-38.6h-34.6c-10.2 0.4-20.4 1.3-30.5 2.8z m122.4-17.3c-11.7-0.7-22.6 5.8-27.6 16.4-5 10.6-3 23.2 5.1 31.7 8 8.5 20.5 11.2 31.3 6.9 10.9-4.3 18-14.9 17.9-26.6 0.4-7.4-2.3-14.6-7.4-19.9-5.1-5.4-12.2-8.4-19.6-8.4h0.3z m125.5-71.6c-6.7-0.1-13.3 1.2-19.4 3.9l2.8-32.7h66.9v-38.1H751.9l-4.7 94.8 19.7 13.1c11.2-7.2 16.2-9.3 26.5-9.3 16.2 0 27.5 10.3 27.5 29.6s-11.3 29.9-29.5 29.9c-14.9 0-28-8-38.6-18.3L732 914.7c17.2 17.6 41 27.2 65.6 26.6 36.1 0 67.9-25 67.9-68 0-41.4-26.8-60.5-58.6-60.5h0.3z m0 0"
                        p-id="3087" fill="#6B6B6B"></path>
                </svg>
                <span>PM2.5：{{roomData.pm}}</span>
            </div>
            <div class="environment-item">
                <svg t="1608890493328" class="icon" viewBox="0 0 1109 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="7086" width="22" height="22">
                    <path
                        d="M531.584 16.213333a79.36 79.36 0 0 0-79.232-1.28 27.306667 27.306667 0 0 0-4.693333 3.328l-13.226667 11.52a26.666667 26.666667 0 0 0 35.072 40.149334l10.666667-9.301334a26.282667 26.282667 0 0 1 24.234666 1.493334 26.24 26.24 0 0 1 13.056 22.954666v824.746667a26.24 26.24 0 0 1-13.056 22.912 26.282667 26.282667 0 0 1-24.234666 1.536l-228.352-199.253333a26.666667 26.666667 0 0 0-4.693334-3.242667 80.256 80.256 0 0 0-38.485333-9.898667H82.048a26.709333 26.709333 0 0 1-26.666667-26.666666v-395.52c0-14.72 11.946667-26.666667 26.666667-26.666667H208.64c13.44 0 26.752-3.413333 38.528-9.898667a26.666667 26.666667 0 0 0 4.693333-3.285333L332.373333 189.568a26.666667 26.666667 0 0 0-35.072-40.192L219.306667 217.429333a26.752 26.752 0 0 1-10.666667 2.261334H82.005333A80.085333 80.085333 0 0 0 2.048 299.690667v395.52c0 44.117333 35.882667 80 80 80H208.64c3.712 0 7.338667 0.768 10.666667 2.261333l228.352 199.168c1.450667 1.28 3.029333 2.389333 4.693333 3.285333 12.16 6.656 25.344 9.984 38.528 9.984 14.08 0 28.074667-3.754667 40.746667-11.264 24.576-14.549333 39.253333-40.277333 39.253333-68.864V85.077333a79.445333 79.445333 0 0 0-39.296-68.821333z"
                        p-id="7087" fill="#6B6b6b"></path>
                    <path
                        d="M382.976 136.704c6.229333 0 12.458667-2.133333 17.493333-6.570667l5.12-4.437333a26.666667 26.666667 0 1 0-35.114666-40.149333l-5.034667 4.394666a26.666667 26.666667 0 0 0 17.493333 46.762667zM910.208 391.125333h-256.341333a26.666667 26.666667 0 0 1-11.946667-50.517333l155.733333-77.952V193.792c0-14.762667 11.946667-26.666667 26.666667-26.666667h256.341333a26.666667 26.666667 0 0 1 11.818667 50.56l-155.605333 76.928v69.845334c0 14.72-11.946667 26.666667-26.666667 26.666666z m170.453333 436.693334H824.32a26.666667 26.666667 0 0 1-26.666667-26.666667v-69.888l-155.605333-76.928a26.666667 26.666667 0 0 1 11.818667-50.56h256.341333c14.72 0 26.666667 11.946667 26.666667 26.666667v68.864l155.733333 77.994666a26.666667 26.666667 0 0 1-11.946667 50.517334z"
                        p-id="7088" fill="#6B6b6b"></path>
                </svg>
                <span>噪声：{{roomData.noise}}</span>
            </div>
        </div>
        <div class="update-time">
            数据上传时间：{{roomData.time}}
        </div>
        <loading :show="isLoading">加载中...</loading>
    </div>
</template>

<script>
    /**
     * 页面操作流程：
     *  通过用户选择的房间id，向服务器发送请求
     *  参数正确的情况下返回所选房间的环境参数
     */

    import {
        reactive,
        ref,
        watch
    } from 'vue'
    import {
        getData
    } from '../../services'

    export default {
        name: 'RoomDetail',
        props: {
            rid: [String, Number]
        },
        setup(props) {
            let roomData = reactive(new Object())

            let isLoading = ref(false)

            function getRoomData(rid) {
                isLoading.value = true
                // 发送请求获取数据
                getData(rid).then((response) => {
                    if (response.data.code == 200) {
                        Object.assign(roomData, response.data.object)
                    }
                    isLoading.value = false
                })
            }

            getRoomData(props.rid)

            watch(() => props.rid, (newId) => {
                // 检测到用户选择的房间id变化时，重新发送请求获取信息
                getRoomData(newId)
            })

            return {
                roomData, // 响应式数组，存放房间环境参数
                isLoading
            }
        }
    }
</script>

<style lang="scss" scoped>
    .room-detail {
        width: 85%;
        margin-top: 2rem;

        span {
            color: #636363;
        }

        .environment-info {
            padding: 0 0 0 2rem;
            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: 50% 50%;

            .environment-item {
                width: 100%;
                height: 4rem;
                display: flex;
                align-items: center;

                span {
                    color: #6b6b6b;
                    margin-left: 0.5rem;
                }
            }
        }

        .update-time {
            color: #5E5E5E;
            font-size: 12px;
        }
    }
</style>